<template>
  <div class="details-center">
    <client-carousel arrows="never" :url="banner" />
    <div class="details-title">
      <h2>{{ details.title }}</h2>
    </div>
    <div class="details-content">
      <div class="details-box">
        <h1>{{ details.title || "无" }}</h1>
        <div class="details-sub-title">
          <!-- 作者： {{ details.publisher || "无" }} &nbsp;&nbsp;&nbsp;&nbsp;  -->
          发布时间：{{
            details.createTime || "--"
          }}
          <el-tag>{{ details.title || '无' }}</el-tag>
        </div>
        <div v-html="details.content" class="details-body"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { navigationcontentDetails } from '@/api/menus/navigationSef';
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getAssetURL } from "@/utils/load_assets";
const router = useRouter();
const route = useRoute();

const detialsId = ref<any>('');//详情id
const details = ref<any>({});//详情
const bannerUrl = getAssetURL("common/sefBanner.png");
const banner = ref<any>([{ url: bannerUrl }]);

onMounted(() => {
  detialsId.value = route.query.id;
  getDetails();
});

/**获取导航详情 */
const getDetails = () => {
  navigationcontentDetails(detialsId.value).then((res: any) => {
    if (200 == res.code) {
      details.value = res.data;
      details.value.content = details.value.content?.replaceAll('<img ','<img class="editor-img" ');
    }
  })
};

</script>

<style scoped lang="less">
.details-center {
  width: 100%;
  min-height: calc(100vh - 400px);
  position: relative;

  .details-title {
    position: absolute;
    left: 0;
    right: 0;
    top: 140px;
    display: flex;
    justify-content: center;

    h2 {
      width: 1200px;
      line-height: 60px;
      font-size: 40px;
      font-weight: 600;
      letter-spacing: 1px;
    }
  }

  .details-content {
    display: flex;
    justify-content: center;
    background-color: #fff;

    .details-box {
      width: 1200px;
      min-height: 300px;

      h1 {
        font-size: 24px;
        font-weight: 500;
        color: #212a40;
        line-height: 32px;
        margin: 24px 0;
      }

      .details-sub-title {
        font-size: 14px;
        font-weight: 400;
        color: #6d7383;
        line-height: 20px;
        padding-bottom: 30px;
        border-bottom: 1px solid #e6e6e6;
      }

      .details-body {
        margin: 20px 0;
      }
    }
  }
}</style>